<template>
  <div class="app-container home">
    <el-form :inline="true" :model="searchDate" class="demo-form-inline">
      <el-form-item label="食物名称">
        <el-input v-model="searchDate.foodName" placeholder="食物名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchHandle">搜索</el-button>
      </el-form-item>
      <el-button type="primary" @click="()=>{
      addEdit.obj = {}
      addEdit.visible = true
    }"
      >添 加
      </el-button>
    </el-form>


    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="id" prop="id"></el-table-column>
      <el-table-column align="center" label="食物名称" prop="foodname"></el-table-column>
      <el-table-column align="center" label="食品能量" prop="energy"></el-table-column>
      <el-table-column align="center" label="食物分类" prop="category"></el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button icon="el-icon-delete" size="mini" type="text"
                     @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
      <el-pagination
        :current-page="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        background
        layout="prev, pager, next"
        @current-change="pageChange"
      />
    </div>


    <el-dialog :title="addEdit.obj.id ? '编辑' : '添加'" :visible.sync="addEdit.visible" width="30%">
      <el-form :model="addEdit.obj" label-width="80px">
        <el-form-item label="食物名称">
          <el-input v-model="addEdit.obj.foodname" placeholder="请输入食物名称"></el-input>
        </el-form-item>
        <el-form-item label="食物能量">
          <el-input v-model="addEdit.obj.energy" placeholder="请输入食物能量"></el-input>
        </el-form-item>
        <el-form-item label="食物分类">
          <el-select v-model="addEdit.obj.category" placeholder="食物分类">
            <el-option
              v-for="(i,k) in ['谷类','薯类','豆类','蔬菜类','动物类','纯热能类']"
              :key="k"
              :label="i"
              :value="i"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button @click="addEdit.visible = false">取 消</el-button>
				<el-button type="primary" @click="editAddHandle(addEdit.obj)">确 定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'index',
  data() {
    return {
      pagination: {
        total: 1000,
        size: 10,
        current: 1
      },
      searchDate: {
        foodName: ''
      },
      tableData: [],
      addEdit: {
        visible: false,
        obj: {
          foodname: '',
          energy: '',
          type: ''
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取数据
    async getList(params = {}) {
      const result = await request({
        url: '/foodinfo',
        method: 'get',
        params
      })
      let end = this.pagination.size * this.pagination.current
      end = end > result.length ? result.length : end
      let start = this.pagination.size * (this.pagination.current - 1)
      this.tableData = result.reverse().slice(start, end)
      this.pagination.total = result.length
    },
    // 分页器回调
    pageChange(v) {
      this.pagination.current = v
      this.getList()
    },
    // 搜索按钮回调
    searchHandle() {
      this.pagination.current = 1
      this.getList(this.searchDate)
    },
    // 编辑
    handleEdit(obj) {
      this.addEdit.obj = obj
      this.addEdit.visible = true
    },
    // 删除
    async handleDelete(obj) {
      const result = await request({
        url: `/foodinfo/${obj.id}`,
        method: 'delete',
        data: obj
      })
      console.log(result)
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      // NOTE: 数据发生变更刷新数据返回第一页
      this.pagination.current = 1
      await this.getList()
    },
    // 编辑/添加回调
    async editAddHandle(obj) {
      console.log(JSON.stringify(this.addEdit.obj), '13412')
      const method = obj.id ? 'put' : 'post'
      const result = await request({
        url: '/foodinfo',
        method,
        data: obj
      })
      console.log(result)
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      await this.getList()
      this.addEdit.visible = false
    }
  }
}
</script>
